import {connect, useLocation, useNavigate} from "umi";
import {DatePicker, DatePickerRef, Form, Input, Picker, PickerRef, Selector, TextArea, Toast} from "antd-mobile";
import {RefObject} from "react";
import dayjs from "dayjs";
import {history} from "@@/core/history";

const HomePage = ({dispatch, apply}) => {
    let location = useLocation();
    let navigate = useNavigate();
    if (location && location.state) {
        console.log("0000000000000000000000000000")
        if (location.state.project) {
            const projectJo = location.state.project;
            console.log("11111111111111111111")
            dispatch({
                type: 'apply/setProjectFromLocationState', payload: {
                    id: projectJo.id,
                    name: projectJo.name,
                    code: projectJo.code
                }
            });
        }
        if (location.state.feeOrg) {
            console.log("222222222222222222")
            const feeOrgJo = location.state.feeOrg;
            dispatch({
                type: 'apply/setFeeOrgFromLocationState', payload: {
                    id: feeOrgJo.id,
                    name: feeOrgJo.name,
                    code: feeOrgJo.code
                }
            });
        }
    }

    const [form] = Form.useForm();
    const handleFormValuesChange = (changedValues, allValues) => {
        dispatch({
            type: 'apply/handleFormValuesChange', payload: {
                changedValues: changedValues,
                allValues: allValues
            }
        });
    }


    return (
        <div>
            <Form requiredMarkStyle='asterisk' mode="default" form={form}
                  initialValues={apply.base} onValuesChange={handleFormValuesChange}>
                <Form.Header>基本信息</Form.Header>
                <Form.Item name='name' label='姓名' rules={[{required: true}]}>
                    <Input type="text" readOnly/>
                </Form.Item>

                <Form.Item name='applyPsn' label='工号' rules={[{required: true}]}>
                    <Input type="text" readOnly/>
                </Form.Item>

                <Form.Item name='applyOrgCode' label='所属组织' rules={[{required: true}]}
                           trigger='onConfirm'
                           onClick={(e, pickerRef: RefObject<PickerRef>) => {
                               pickerRef.current?.open() // ⬅️
                           }}>
                    <Picker columns={[apply.applyOrgs]}>
                        {(value) => {
                            return value.length > 0 ? value[0].label : '请选择所属组织';
                        }}
                    </Picker>
                </Form.Item>
                <Form.Item name='applyDept' label='所属部门' rules={[{required: true}]}
                           trigger='onConfirm'
                           onClick={(e, pickerRef: RefObject<PickerRef>) => {
                               pickerRef.current?.open() // ⬅️
                           }}>
                    <Picker columns={[apply.applyDepts]}>
                        {(value) => {
                            return value.length > 0 ? value[0].label : '请选择所属部门';
                        }}
                    </Picker>
                </Form.Item>
                <Form.Item name='cause' label='申请事由' rules={[{required: true}]}>
                    <TextArea placeholder='请输入内容' rows={4}/>
                </Form.Item>
                <Form.Item name='feeType' label='费用类型' rules={[{required: true}]}>
                    <Selector columns={2} options={[{value: "1", label: "部门"}, {value: "2", label: "项目"}]}/>
                </Form.Item>
                <Form.Item name='feeOrgName' label='费用承担组织' rules={[{required: true}]} onClick={() => {
                    history.push("/index/feeOrg")
                }}>
                    <Input placeholder='请选择费用承担组织' />
                </Form.Item>
                <Form.Item name='feeDeptName' label='费用承担部门' rules={[{required: true}]} onClick={() => {
                    if (apply.base.feeOrg) {
                        navigate("/index/project", {
                            state: {orgId: apply.base.feeOrg},
                        })
                    } else {
                        Toast.show({
                            icon: 'fail',
                            content: '请选择费用承担组织',
                        })
                    }
                }}>
                    <Input placeholder='请选择费用承担部门'/>
                </Form.Item>
                <Form.Item name='projectName' label='项目' rules={[{required: true}]} onClick={() => {
                    if (apply.base.feeOrg) {
                        navigate("/index/project", {
                            state: {orgId: apply.base.feeOrg},
                        })
                    } else {
                        Toast.show({
                            icon: 'fail',
                            content: '请选择费用承担组织',
                        })
                    }
                }}>
                    <Input placeholder='请选择项目' label={apply.base.projectName}/>
                </Form.Item>
                <Form.Item name='costOrgName' label='成本中心' rules={[{required: true}]} onClick={() => {
                    history.push("/index/feeOrg")
                }}>
                    <Input placeholder='请选择成本中心' />
                </Form.Item>
                <Form.Item
                    name='birthday2'
                    label='Birthday'
                    onClick={(e, datePickerRef: RefObject<DatePickerRef>) => {
                        datePickerRef.current?.open() // ⬅️
                    }}
                >
                    <DatePicker>
                        {value =>
                            value ? dayjs(value).format('YYYY-MM-DD') : 'Please select'
                        }
                    </DatePicker>
                </Form.Item>

            </Form>
        </div>
    );
}

export default connect(apply => apply)(HomePage);